<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <title>商品详情</title>

    <link href="__PUBLIC__/AmazeUI-2.4.2/assets/css/admin.css" rel="stylesheet" type="text/css"/>
    <link href="__PUBLIC__/AmazeUI-2.4.2/assets/css/amazeui.css" rel="stylesheet" type="text/css"/>
    <link href="__PUBLIC__/basic/css/demo.css" rel="stylesheet" type="text/css"/>
    <link type="text/css" href="__PUBLIC__/css/optstyle.css" rel="stylesheet"/>
    <link type="text/css" href="__PUBLIC__/css/style.css" rel="stylesheet"/>

    <style>
        .goods-list{
            clear: both;
            padding-top: 10px;
        }

        .good {
            padding: 10px 0px;
            background: #FFF;
        }
        .goods-list .img{
            width: 100px;
            text-align: center;
            background: #FFF;
            float: left;
            height: 70px;
        }
        .goods-list .good-title{
            float: left;
            width: 194px;
            background: #FFF;
            height: 70px;
        }

        .goods-list .xq{
            background: #FFF;
            float: left;
            width: 80px;
            text-align: center;
            line-height: 38px;
            height: 70px;
        }
        .biu{

            color: #2C2D2F;
            font-size: 11px;
            height: 36px;
            line-height: 18px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            letter-spacing: 0;
            vertical-align: middle;
        }
        .diu{
            font-size: 9px;
            color: #787878;
            line-height:30px;
        }
        .btn-w{
            display: inline-block;
            font-size: 12px;
            color: #787878;
            border: 1px solid #787878;
            border-radius: 8px;
            padding: 1px 4px;
            margin-left: 15px;
        }
        .snum{
            font-size: 9px;line-height: 15px;color: #787878;
        }
        .gobtn{
            display: block;font-size: 10px;color: #787878;line-height: 21px;border: 1px solid #C2C2C2;width: 70px;text-align: center;border-radius: 10px;
        }
    </style>
    <style>
        .courier{
            margin-top: 10px;width: 100%;
        }
        .courier .car{
            width: 15%;float: left;text-align: center;background: #FFFFFF;line-height:50px;
        }
        .courier .info{
            width: 75%;float: left;line-height: 21px; background: #FFFFFF;padding: 10px 0px;
        }
        .courier .right{
            width: 10%;float: left;text-align: center;background: #FFFFFF;
        }

        .info-box{
            padding-top: 10px;width: 100%;
            clear: both;
        }
        .info-box .add{
            width: 15%;float: left;text-align: center;background: #FFFFFF;
        }
        .info-box .addinfo{
            width: 85%;float: left;line-height: 21px; background: #FFFFFF;padding: 10px 20px 10px 0px;
            font-size: 15px;color: #787878;
        }
    </style>
</head>

<body class="bg-default">
<header data-am-widget="header" class="am-header am-header-default am-header-fixed">
    <div class="am-header-left am-header-nav">
        <a href="#left-link" class="" onclick="back()">
            <i class="am-header-icon am-icon-angle-left am-icon-sm" style="color: #FFAD01;"></i>
        </a>
    </div>
    <h1 class="am-header-title">
        <a href="#title-link" class="">
            订单详情
        </a>
    </h1>
</header>


<a href="__APP__/Home/Order/logisticDetail?order_id={$order.order_id}">
    <div class="courier">
        <div class="car">
            <img src="__PUBLIC__/new_images/car.png" width="40" alt="">
        </div>
        <div class="info">
            <empty name="logisticsInfo">
                <span style="font-size: 15px;color: #FFAD01">暂无物流信息</span><br>
                <else/>
                <volist name="logisticsInfo" id="vo" offset="0" length='1'>
                    <span style="font-size: 15px;color: #FFAD01">{$vo.AcceptStation}</span><br>
                    <span style="font-size: 11px;color: #787878;">{$vo.AcceptTime}</span>
                </volist>
            </empty>


        </div>
        <div class="right">
            <img src="__PUBLIC__/new_images/right.png" width="24" alt="">
        </div>
    </div>
</a>
<div class="info-box">
    <div class="add">
        <img src="__PUBLIC__/new_images/map_big.png" width="34" alt="">
    </div>
    <div class="addinfo">
        <span style="">收货人：{$order.consignee}</span><span style="float: right">{$order.mobile}</span><br>
        <span >收货地址：{$order.address}</span>
    </div>
</div>


<div class="goods-list">
    <volist name="order.goodsList" id="goods">
        <div class="good">
            <div class="img">
                <img src="{$goods.image_url}" width="62" height="62" alt="">
            </div>
            <div class="good-title">
                <span class="biu">{$goods.goods_name}</span>
                <span class="diu">{$goods.region_name}</span>
            </div>
            <div class="xq">
                <span class="snum">x{$goods.goods_num}</span><br>
                <switch name="goods.is_send">

                    <case value="0"><span class="gobtn">未发货</span></case>
                    <case value="1"><a id="goods_{$goods.rec_id}" href="__APP__/Home/Order/goToReturnGoods/?rec_id={$goods.rec_id}" ><span class="gobtn">退款/退货</span></a></case>
                    <case value="2"><span class="gobtn">已换货</span></case>
                    <case value="3"><span class="gobtn">已退货</span></case>
                </switch>
            </div>
        </div>
    </volist>
</div>

<div class="am-g am-text-right " style="padding-top: 10px;clear: both">
    <div class="am-u-sm-12  bg-white" style="font-size: 15px;line-height: 30px;color: #787878;padding: 10px;">
        <span style="display: block;">运费：￥{$order.shipping_price}</span>
        <span >合计（含运费）：<span style="color: red;">￥{$order.order_amount}</span></span>
    </div>
</div>
<div class="am-g">
    <div class="am-u-sm-12 am-text-right bg-white am-padding-bottom-xs">
        <a href="__APP__/Home/Order/logisticDetail?order_id={$order.order_id}"><span class="btn-w">查看物流</span></a>
        <!--<a href="#"><span class="btn-w">延长收货</span></a>-->
        <eq name="order.order_status" value="1" >
            <eq name="order.shipping_status" value="1">
                <a onclick="confirmReceipt('{$order.order_id}')" id="confirm_receipt"><span class="btn-w" style="border: 1px solid #FFAD01;color: #FFAD01">确定收货</span></a>
            </eq>
        </eq>
        <!--<eq name="order.order_status" value="2">-->
            <!--<a href="__APP__/Home/Order/commentUI?order_id={$order.order_id}"><span class="btn-w" style="border: 1px solid #FFAD01;color: #FFAD01">一键评价</span></a>-->
        <!--</eq>-->
        <eq name="order.order_status" value="4">
            <a href="#"><span class="btn-w" style="border: 1px solid #FFAD01;color: #FFAD01">交易成功</span></a>
        </eq>
    </div>
</div>
</body>
<script type="text/javascript" src="__PUBLIC__/basic/js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/AmazeUI-2.4.2/assets/js/amazeui.js"></script>
<script type="text/javascript" src="__PUBLIC__/layer/layer.js"></script>
<script>
    $(function () {
       var h = $('.info').outerHeight();
        $('.car').css('line-height',h+'px');
        $('.right').css('line-height',h+'px');
        var h2 = $('.addinfo').outerHeight();
        $('.add').css('line-height',h2  +'px');

        var w = document.body.clientWidth-180;

        $('.good-title').css('width',w);
    });
    function modalInfo(info,success){
        layer.msg(info);
//        if(success) {
//            layer.msg(info, {icon: 1});
//        }else{
//            layer.msg(info, {icon: 2});
//        }

    }

    function confirmReceipt(order_id) {
        $.ajax({
            url:"__APP__/Home/Order/confirmReceipt",
            data:{
                order_id:order_id,
            },
            success: function(data){
                modalInfo(data.message,data.success);
                if(data.success){
                    $('#confirm_receipt').hide();
                }
//                if(data.success) {
//                    var id = 'goods_' + goods_id + '_' + order_id;
//                    $('#' + id).hide();
//                }
            },
            error:function (data) {
                console.info(data);
                modalInfo('服务器繁忙！',false);
            }
        });
    }

    function back() {
        if (/(iPhone|iPad|iPod)/i.test(navigator.userAgent)) {
            window.location.href = window.document.referrer;
        } else { window.history.go("-1"); }
    }
</script>
</html>